<template>
  <div>
    <el-row class="options">
      <el-button type="primary" @click="add">添加通知</el-button>
    </el-row>
    <el-table class="table" :data="tableData" stripe>
      <el-table-column prop="id" label="通知编号"></el-table-column>
      <el-table-column prop="content" label="通知内容"></el-table-column>
      <el-table-column prop="send_time" label="发送时间"></el-table-column>
      <el-table-column prop="duration" label="发送时长"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleDetail(scope.row)" type="text">编辑</el-button>
          <el-button @click="handleDel(scope.row)" type="text" class="del">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" :total="total" @current-change="changeCurrent"></el-pagination>

    <add :isShow="isShow" :row="row" @close="closeDialog" @update="getList"></add>
  </div>
</template>

<script>
import { messageListApi, messageDelApi } from "@/api/modules/message"
import add from "./add.vue"
export default {
  components: {
    add
  },
  data() {
    return {
      tableData: [],
      isShow: false,
      row: {},
      page: 1,
      pageSize: 10,
      total: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    changeCurrent(val) {
      this.page = val
      this.getList()
    },
    handleDetail(row) {
      this.row = row
      this.isShow = true
    },
    closeDialog() {
      this.isShow = false
    },
    onDel(id) {
      messageDelApi({ id }).then(res => {
        this.getList()
      })
    },
    handleDel(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.onDel(row.id)
        })
        .catch(() => {})
    },
    getList() {
      messageListApi({
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data
        this.total = res.total
      })
    },
    add() {
      this.isShow = true
    }
  }
}
</script>

<style lang="less" scoped>
.options {
  display: flex;
  justify-content: end;
}
.table {
  margin-top: 30px;
}
.el-pagination {
  padding: 10px;
  background: #fff;
  display: flex;
  justify-content: end;
}
/deep/ .el-pager li {
  font-size: 14px;
}
.del {
  color: #f56c6c;
}
</style>
